<template>
    <g-cell :borderdash="borderless" :icon="lefticon" :title="label" :required="required" :titleWidth="titleWidth"
        :center="useButtonSlot || center" :circle="circle" :rightIcon="rightIcon" :style="[customStyle]"
        class="input-field">
        <slot name="left-icon" slot="icon" v-if="$slots.icon"></slot>
        <slot name="label" slot="title"></slot>

        <view class="input-filed__body">
            <textarea v-if="type === 'textarea'" class="input-field__control" :value="value" :placeholder="placeholder"
                :disabled="disabled || readonly" :maxlength="maxlength" :auto-height="autosize"
                :style="{'height': height, 'textAlign': fieldalign}" @input="onInput" @blur="onBlur" @focus="onFocus"
                @confirm="onConfirm" />

            <input v-else class="input-field__control" :value="value" :type="type" :password="password"
                :placeholder="placeholder" :disabled="disabled || readonly" :maxlength="maxlength"
                :style="{'textAlign': fieldalign,'color': inputColor}" @input="onInput" @blur="onBlur" @focus="onFocus"
                @confirm="onConfirm" />

            <view class="input-field__icon-container">
                <text :class="icon" class="input-field__icon" v-if="icon" @click="onClickIcon"></text>
                <slot v-else name="icon"></slot>
            </view>

            <view class="input-field__button" v-if="useButtonSlot">
                <slot name="button"></slot>
            </view>

        </view>
   </g-cell >
</template>

<script>
    export default {
        name: 'inputField',
        data() {
            return {
                useButtonSlot: false
            }
        },
        model: {
            prop: 'value',
            event: 'update'
        },
        props: {
            borderless: Boolean,
            disabled: Boolean,
            autosize: Boolean,
            value: [String, Number],
            password: Boolean,
            readonly: Boolean,
            placeholder: String,
            label: String,
            icon: String,
            lefticon: String,
            height: String,
            circle: String,
            center: Boolean,
            titleWidth: {
                type: String,
                default: '100px'
            },
            fieldalign: {
                type: String,
                default: 'left'
            },
            required: {
                type: Boolean,
                default: false
            },
            type: {
                type: String,
                default: 'text'
            },
            maxlength: {
                type: Number,
                default: -1
            },
            rightIcon: String,
            customStyle: {
                type: Object,
                default () {
                    return {}
                }
            },
            inputColor: String
        },
        mounted() {
            if (this.$slots.button) {
                this.useButtonSlot = true
            }
        },
        methods: {
            onInput(e) {
                this.$emit('update', e.detail.value)
                this.$emit('input', e.detail.value)
            },
            onFocus(e) {
                this.$emit('focus', e)
            },
            onBlur(e) {
                this.$emit('blur', e)
            },
            onConfirm(e) {
                this.$emit('confirm', e)
            },
            onClickIcon() {
                this.$emit('click-right-icon')
            }
        }
    }
</script>

<style scoped lang="scss">
    .input-field {
        .input-filed__body {
            display: flex;
            align-items: center;

            .input-field__control {
                display: block;
                box-sizing: border-box;
                width: 0;
                flex: 1;
                margin: 0;
                padding: 0;
                color: #323233;
                text-align: left;
                background-color: transparent;
                border: 0;
                line-height: 24px;
                height: 24px;
                resize: none;
                font-size: 14px;
            }

            .input-field__button {
                margin-left: 10px;
                height: 30px;
                display: flex;
                align-items: center;
            }
        }
    }
</style>
